<script setup>
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import loginApi from '../api/Login_api.js'
import { ElMessage } from 'element-plus'

const user = ref({
  userNumber: '',
  userPassword: '',
  captcha: '',
  key: ''
});

onMounted(function () {
  localStorage.removeItem("token");
  // 加载验证码
  loadCaptcha();
})

// 获取路由对象
const router = useRouter();

// 验证码图片数据
const captcha = ref("");

const onSubmit = async () => {
  try {
    const res = await loginApi.dologin(user.value);
    if (res) {
      localStorage.setItem("token", res);
      // 获取用户信息以确定角色
      const userInfo = await loginApi.loginInfo();

      if (userInfo.role === 'administrator') {
        console.log(userInfo.role);
        router.push("/User");
      } else {
        console.log(userInfo.role);
        router.push("/PostHouse");
      }
    }
  } catch (error) {
    console.error('登录失败', error);
    ElMessage.error('登录失败: ' + (error.response?.data?.msg || error.message));
  }
}

const toRegister = () => {
  router.push("/register");
}

// 加载验证码
const loadCaptcha = async () => {
  try {
    const res = await loginApi.captcha();
    user.value.key = res.key;
    captcha.value = res.base;
  } catch (error) {
    console.error('获取验证码失败', error);
    ElMessage.error('获取验证码失败');
  }
}
// const toForgotPassword = () => {
//   router.push('/reset-password-email')
// }
</script>

<template>
  <div class="login-bg">
    <el-form class="form-login" :model="user">
      <el-row>
        <el-col :span="24">
          <h1>用户登录</h1>
        </el-col>
      </el-row>
      <el-form-item>
        <el-input v-model="user.userNumber"
                  placeholder="请输入账号"
                  maxlength="16"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="user.userPassword"
                  placeholder="请输入密码"
                  show-password
                  maxlength="16"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="user.captcha"
                  placeholder="验证码"
                  maxlength="5"
                  class="input-verCode"></el-input>
        <img :src="captcha"
             class="img-verCode" @click="loadCaptcha">
      </el-form-item>
      <el-form-item>
        <el-button class="btn-login" type="primary" @click="onSubmit">登录</el-button>
        <el-button class="btn-login" @click="toRegister">注册</el-button>
        <div style="text-align: right; margin-top: 10px">
          <router-link
              to="/reset-password-email"
              style="color: #409EFF; text-decoration: none"
          >
            忘记密码？
          </router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.login-bg {
  height: 100vh;
  background-image: url('../assets/back.png');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-login {
  width: 300px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #409EFF;
}

.input-verCode {
  width: 180px;
}

.img-verCode {
  width: 100px;
  height: 40px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 4px;
}

.btn-login {
  width: 100%;
  margin-bottom: 10px;
}
</style>
